<template>
  <div class="detail" data-cid="86">
    <div class="detail__category">
      <a
        href="https://78.al/category/vue-2-0.html"
        class="item item-0"
        title="Vue 2.0"
        >{{ article.category }}</a
      >
    </div>

    <h1 class="detail__title">{{ article.title }}</h1>
    <div class="detail__count">
      <div class="detail__count-information">
        <img
          width="35"
          height="35"
          class="avatar ls-is-cached lazyloaded"
          src="../../../assets/icon.jpg"
          alt="大白"
        />
        <div class="meta">
          <div class="author">
            <span class="link" title="大白">大白</span>
          </div>
          <div class="item">
            <span class="text">{{ article.time }}</span>
            <span class="line">/</span>
            <span class="text">{{ article.commentNum }} 评论</span>
            <span class="line">/</span>
            <span class="text" id="Article_Views"
              >{{ article.readNum }} 阅读</span
            >
            <span class="line">/</span>
            <span
              class="text"
              id="Baidu_Record"
              style="color: rgb(103, 194, 58)"
              >已收录</span
            >
          </div>
        </div>
      </div>
      <time class="detail__count-created" v-if="article.time">{{
        article.time.substring(5, 10)
      }}</time>
    </div>
    <div class="ql-snow">
      <article
        class="detail__article ql-editor"
        v-html="article.content"
      ></article>
    </div>
    <div class="detail__agree">
      <div class="agree">
        <div class="icon active">
          <svg
            class="icon-1 active"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="28"
          >
            <path
              d="M736 128c-65.952 0-128.576 25.024-176.384 70.464-4.576 4.32-28.672 28.736-47.328 47.68L464.96 199.04C417.12 153.216 354.272 128 288 128 146.848 128 32 242.848 32 384c0 82.432 41.184 144.288 76.48 182.496l316.896 320.128C450.464 911.68 478.304 928 512 928s61.568-16.32 86.752-41.504l316.736-320 2.208-2.464C955.904 516.384 992 471.392 992 384c0-141.152-114.848-256-256-256z"
              fill="#fff"
            ></path>
          </svg>
          <svg
            class="icon-2"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="28"
          >
            <path
              d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z"
              fill="#fff"
            ></path>
          </svg>
        </div>
        <span class="text">{{ article.likesNum }}</span>
      </div>
    </div>
    <div class="detail__operate">
      <div class="detail__operate-tags">
        <a href="javascript: void(0);">{{ article.category }}</a>
      </div>
    </div>
    <div class="detail__copyright">
      <div class="content">
        <div class="item">
          <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
            <path
              d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z"
              fill="#FFF"
            ></path>
            <path
              d="M512.35 0C228.733 0 .5 228.233.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0zm275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z"
              fill="#"
            ></path>
          </svg>
          <span>版权属于：</span>
          <span class="text">大白</span>
        </div>
        <div class="item">
          <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
            <path
              d="M511.854 0A511.854 511.854 0 1 0 1024 511.854 511.854 511.854 0 0 0 511.854 0z"
              fill="#39B54A"
            ></path>
            <path
              d="M576.491 630.355L460.028 746.818a129.565 129.565 0 0 1-182.555 0l-2.038-2.038a128.983 128.983 0 0 1 0-182.264l81.233-81.233a179.644 179.644 0 0 0 13.102 70.46l-52.7 52.408a69.878 69.878 0 0 0 0 98.703l2.038 2.038a70.169 70.169 0 0 0 98.703 0l116.463-116.463a69.878 69.878 0 0 0 0-98.703l-2.039-2.038a69.587 69.587 0 0 0-13.975-10.772l42.509-42.51a128.11 128.11 0 0 1 13.102 11.356l2.038 2.038a129.274 129.274 0 0 1 0 182.264z"
              fill="#FFF"
            ></path>
            <path
              d="M746.236 460.902l-81.233 81.233a179.353 179.353 0 0 0-13.102-70.46l52.7-52.409a69.878 69.878 0 0 0 0-98.702l-2.039-2.038a69.878 69.878 0 0 0-98.702 0L487.397 434.989a69.878 69.878 0 0 0 0 98.702l2.038 2.038a68.422 68.422 0 0 0 13.976 10.773l-42.51 42.51a136.553 136.553 0 0 1-13.101-11.356l-2.038-2.038a128.983 128.983 0 0 1 0-182.265l116.463-116.462a129.565 129.565 0 0 1 182.555 0l2.038 2.038a128.983 128.983 0 0 1 0 182.264z"
              fill="#FFF"
            ></path>
          </svg>
          <span>文章ID：</span>
          <span class="text">
            <span
              class="link"
              target="_blank"
              rel="noopener noreferrer nofollow"
              >{{ $route.params.id }}</span
            >
          </span>
        </div>
        <div class="item">
          <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
            <path
              d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z"
              fill="#F3B243"
            ></path>
            <path
              d="M540.672 323.584a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM540.672 688.128a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM229.376 512a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0z"
              fill="#FFF"
            ></path>
            <path
              d="M341.037 480.37l257.344-175.718 27.713 40.592-257.34 175.718z"
              fill="#FFF"
            ></path>
            <path
              d="M349.053 488.452L601.907 670.56l-28.725 39.887L320.307 528.34z"
              fill="#FFF"
            ></path>
          </svg>
          <span>作品采用：</span>
          <span class="text">
            《
            <a
              class="link"
              href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
              target="_blank"
              rel="noopener noreferrer nofollow"
              >署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a
            >
            》许可协议授权
          </span>
        </div>
      </div>
    </div>
    <div class="comment">
      <h3 class="comment__title">评论 ({{ comments.length }})</h3>
      <div id="respond-post-1890" class="comment__respond">
        <a-form
          method="post"
          class="comment__respond-form"
          :form="form"
          @submit="handleSubmit"
        >
          <div class="head">
            <div class="list">
              <a-input
                type="text"
                v-model="commentForm.author"
                autocomplete="off"
                name="author"
                placeholder="请输入昵称..."
              />
            </div>
            <div class="list">
              <a-input
                type="email"
                v-model="commentForm.email"
                autocomplete="off"
                name="mail"
                placeholder="请输入邮箱..."
              />
            </div>
            <div class="list">
              <a-input
                type="text"
                autocomplete="off"
                v-model="commentForm.website"
                name="url"
                placeholder="请输入网址（非必填）..."
              />
            </div>
          </div>
          <div class="body">
            <a-textarea
              class="text owo__target"
              name="text"
              v-model="commentForm.content"
              autocomplete="new-password"
            ></a-textarea>
          </div>
          <div class="foot">
            <div class="submit">
              <a-button type="primary" html-type="submit">发送评论</a-button>
            </div>
          </div>
        </a-form>
      </div>
      <a-list
        class="comment-list"
        :header="`${comments.length} 条回复`"
        item-layout="horizontal"
        :data-source="comments"
        :locale="{ emptyText: '暂无评论' }"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-comment
            :author="item.author"
            :avatar="'https://api.yimian.xyz/img?type=head&id=' + index"
          >
            <p slot="content">
              {{ item.content }}
            </p>
            <a-tooltip
              slot="datetime"
              :title="moment(item.time).format('YYYY-MM-DD HH:mm:ss')"
            >
              <span>{{ moment(item.time).fromNow() }}</span>
            </a-tooltip>
          </a-comment>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  mounted() {
    // 获取文章详情
    this.getArticleDetail(this.$route.params.id);
  },
  data() {
    return {
      moment,
      article: {},
      // 评论
      comments: [],
      // 评论框
      commentForm: {
        // 评论者
        author: "",
        // 评论内容
        content: "",
        // 邮箱
        email: "",
        // 网址
        website: "",
      },
    };
  },
  watch: {
    $route(to, from) {
      if (to.name === "article") {
        // 通过路径获取新的 keywords 值
        let param = to.params.id;
        // 通过新的参数值获取新的数据
        this.getArticleDetail(param);
      }
    },
  },

  methods: {
    // 获取文章详情
    getArticleDetail(id) {
      this.$axios
        .post(`/api/article/detail.php`, {
          id,
        })
        .then((res) => {
          const { data } = res;
          if (data.code === 1) {
            console.log(this.article);
            this.article = data.data[0];
            this.$axios
              .post(`/api/comment/comment.php`, {
                id,
              })
              .then((res) => {
                const { data: data2 } = res;
                if (data2.code === 1) {
                  this.comments = data2.data;
                }
              });
          } else {
            this.$message.error("获取文章详情失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 发布评论
    handleSubmit(e) {
      e.preventDefault();
      const commentForm = this.commentForm;
      if (
        commentForm.author.trim() === "" ||
        commentForm.content.trim() === "" ||
        commentForm.email.trim() === ""
      ) {
        this.$message.error("请输入完整信息");
        // 清空
        this.commentForm = {};
        return;
      }
      if (commentForm.author.length > 10) {
        this.$message.error("昵称过长");
        // 清空
        this.commentForm = {};
        return;
      }
      // 校验通过
      this.$axios
        .post(`/api/comment/submit.php`, {
          id: this.$route.params.id,
          ...commentForm,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.getArticleDetail(this.$route.params.id);
            this.$message.success(res.data.msg);
            this.commentForm = {};
          } else {
            this.$message.error(res.data.msg);
            this.commentForm = {};
          }
        });
    },
  },
};
</script>

<style scoped>
/* 文章内容的样式 */
.detail {
  background: var(--background);
  border-radius: var(--radius-wrap);
  padding: 15px;
  box-shadow: var(--box-shadow); /* margin-bottom:15px; */
}
.detail__category {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.detail__category .item {
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  margin-right: 5px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  transition: transform 0.35s, opacity 0.35s;
}
.detail__category .item:hover {
  opacity: 0.85;
  transform: translate3d(0, -3px, 0);
}
.detail__category .item:last-child {
  margin-right: 0;
}
.detail__category .item-0 {
  background: #0396ff;
}
.detail__category .item-1 {
  background: #ea5455;
}
.detail__category .item-2 {
  background: #7367f0;
}
.detail__category .item-3 {
  background: #28c76f;
}
.detail__category .item-4 {
  background: #9f44d3;
}
.detail__category .edit {
  color: var(--minor);
  margin-left: auto;
}
.detail__category .edit:hover {
  color: var(--theme);
}
.detail__title {
  font-size: 24px;
  color: var(--main);
  text-shadow: var(--text-shadow);
  text-align: center;
  margin-bottom: 15px;
  word-break: break-word;
}
.detail__count {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--classC);
}
.detail__count::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 80px;
  height: 3px;
  border-radius: 1.5px;
  background: var(--theme);
}
.detail__count-information {
  display: flex;
  align-items: center;
}
.detail__count-information .avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid var(--classA);
  padding: 3px;
  -o-object-fit: cover;
  object-fit: cover;
}
.detail__count-information .meta {
  display: flex;
  flex-direction: column;
  height: 35px;
  justify-content: space-between;
  font-size: 12px;
}
.detail__count-information .meta .author .link {
  font-weight: 500;
  color: var(--theme);
}
.detail__count-information .meta .author .link:hover {
  text-decoration: underline;
}
.detail__count-information .meta .item {
  display: flex;
  align-items: center;
  color: var(--minor);
  line-height: 16px;
}
.detail__count-information .meta .item .line {
  color: var(--seat);
  margin: 0 7px;
  vertical-align: middle;
}
.detail__count-created {
  font-size: 32px;
  line-height: 42px;
  color: var(--routine);
  user-select: none;
  text-shadow: var(--text-shadow);
  font-family: consolas;
}
.detail__overdue {
  padding-top: 15px;
}
.detail__overdue-wrapper {
  background: #fffcef;
  border-radius: var(--radius-inner);
  padding: 15px;
  color: #db7c22;
  border: 1px solid #ffbb76;
  animation: overdue 1.5s ease-in-out;
}
.detail__overdue-wrapper .title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}
.detail__overdue-wrapper .title .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.detail__overdue-wrapper .content {
  padding-left: 28px;
}
.detail__overdue-wrapper:hover {
  clip-path: circle(75%);
}
.detail__article {
  padding-top: 15px;
  font-size: 15px;
  word-break: break-word;
  color: var(--routine);
}
.detail__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.detail__agree .agree {
  text-align: center;
  font-size: 12px;
  color: var(--minor);
  user-select: none;
}
.detail__agree .agree .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f56c6c;
  cursor: pointer;
  margin-bottom: 8px;
}
.detail__agree .agree .icon.active {
  animation: box_shadow 1s;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
.detail__agree .agree .icon svg {
  position: absolute;
  width: 28px;
  height: 28px;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.85s, opacity 0.85s;
}
.detail__agree .agree .icon svg.active {
  transform: scale(1);
  opacity: 1;
}
.detail__operate {
  margin-bottom: 15px;
  color: var(--routine);
  display: flex;
  align-items: center;
}
.detail__operate-tags {
  flex-shrink: 0;
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
.detail__operate-tags a {
  flex-shrink: 0;
  position: relative;
  margin-right: 10px;
  font-size: 12px;
  background-color: var(--classD);
  color: var(--minor);
  border: 1px solid var(--classD);
  padding-right: 8px;
  padding-left: 29px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  max-width: 125px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.25s, color 0.25s;
}
.detail__operate-tags a:hover {
  color: var(--routine);
  border: 1px solid var(--classC);
}
.detail__operate-tags a:last-child,
.detail__operate-tags a:nth-child(5) {
  margin-right: 0;
}
.detail__operate-tags a:nth-child(n + 6) {
  display: none;
}
.detail__operate-tags a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: var(--background);
  border-radius: 50%;
}
.detail__operate-tags a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}
.detail__copyright {
  padding-top: 15px;
  border-top: 1px solid var(--classC);
}
.detail__copyright .content {
  background: var(--classD);
  padding: 15px;
  border-radius: var(--radius-inner);
}
.detail__copyright .content .item {
  color: var(--minor);
  margin-bottom: 5px;
  word-break: break-word;
  line-height: 22px;
}
.detail__copyright .content .item:last-child {
  margin-bottom: 0;
}
.detail__copyright .content .item .icon {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: -4px;
}
.detail__copyright .content .item .link {
  color: var(--minor);
}
.detail__copyright .content .item .link:hover {
  color: var(--theme);
}

.comment {
  background: var(--background);
  border-radius: var(--radius-wrap);
  box-shadow: var(--box-shadow);
  padding: 15px;
}
.comment__title {
  font-weight: 500;
  text-align: center;
  font-size: 24px;
  color: var(--main);
  text-shadow: var(--text-shadow);
  border-bottom: 1px solid var(--classC);
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.comment__close {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--routine);
}
.comment__close-icon {
  fill: var(--routine);
  margin-right: 5px;
}
.comment__respond-type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.comment__respond-type .item {
  background: var(--classD);
  padding: 0 15px;
  height: 32px;
  color: var(--main);
  border: none;
  transition: color 0.35s, background 0.35s;
}
.comment__respond-type .item:first-child {
  border-top-left-radius: var(--radius-inner);
}
.comment__respond-type .item:last-child {
  border-top-right-radius: var(--radius-inner);
}
.comment__respond-type .item.active {
  color: #fff;
  background: var(--theme);
}
.comment__respond-form {
  border-radius: 6px 0 6px 6px;
  background: var(--classD);
}
.comment__respond-form .head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--classA);
}
.comment__respond-form .head .list {
  flex: 1;
}
.comment__respond-form .head .list input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0 15px;
  height: 40px;
  color: var(--routine);
}
.comment__respond-form .head .list:nth-child(2) {
  position: relative;
}
.comment__respond-form .head .list:nth-child(2)::after,
.comment__respond-form .head .list:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--classA);
}
.comment__respond-form .head .list:nth-child(2)::before {
  left: 0;
}
.comment__respond-form .head .list:nth-child(2)::after {
  right: 0;
}
.comment__respond-form .body {
  padding: 15px;
}
.comment__respond-form .body .text {
  width: 100%;
  height: 200px;
  border: none;
  resize: none;
  vertical-align: middle;
  color: var(--routine);
  background: transparent;
}
.comment__respond-form .body .draw {
  position: relative;
  width: 100%;
}
.comment__respond-form .body .draw .line {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  left: 10px;
  user-select: none;
}
.comment__respond-form .body .draw .line li {
  cursor: pointer;
  margin-right: 10px;
  color: var(--main);
  transition: color 0.35s;
}
.comment__respond-form .body .draw .line li.active {
  color: var(--theme);
}
.comment__respond-form .body .draw .color {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.comment__respond-form .body .draw .color li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: box-shadow 0.35s;
}
.comment__respond-form .body .draw .color li.active {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.comment__respond-form .body .draw .color li:nth-child(1) {
  background: #303133;
}
.comment__respond-form .body .draw .color li:nth-child(2) {
  background: #67c23a;
}
.comment__respond-form .body .draw .color li:nth-child(3) {
  background: #e6a23c;
}
.comment__respond-form .body .draw .color li:nth-child(4) {
  background: #f56c6c;
}
.comment__respond-form .body .draw .icon {
  position: absolute;
  right: 10px;
  cursor: pointer;
  fill: var(--minor);
  user-select: none;
}
.comment__respond-form .body .draw .icon-undo {
  top: 10px;
}
.comment__respond-form .body .draw .icon-animate {
  bottom: 10px;
}
.comment__respond-form .body .draw canvas {
  background: var(--background);
  border-radius: var(--radius-inner);
}
.comment__respond-form .foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 15px;
}
.comment__respond-form .foot .owo {
  min-height: 32px;
  padding-top: 3px;
}
.comment__respond-form .foot .owo .seat {
  text-align: center;
  color: var(--routine);
  height: 26px;
  line-height: 26px;
  background: var(--background);
  opacity: 0.85;
  border-radius: 13px;
  width: 70px;
}
.comment__respond-form .foot .submit {
  position: absolute;
  top: -40px;
  right: 15px;
  white-space: nowrap;
}
.comment__respond-form .foot .submit button {
  border-radius: 3px;
  height: 32px;
  padding: 0 15px;
  border: none;
  background: var(--theme);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.comment .comment-list {
  padding-top: 15px;
}
.comment .comment-list__item-contain .term {
  display: flex;
  margin-bottom: 15px;
}
.comment .comment-list__item-contain .term .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 15px;
  padding: 3px;
  border: 1px solid var(--classD);
  object-fit: cover;
}
.comment .comment-list__item-contain .term .content {
  min-width: 0;
  flex: 1;
  border-bottom: 1px solid var(--classC);
  padding-bottom: 15px;
}
.comment .comment-list__item-contain .term .content .user {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  line-height: 20px;
  color: var(--main);
}
.comment .comment-list__item-contain .term .content .user .author {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 10px;
}
.comment .comment-list__item-contain .term .content .user .author a {
  color: #409eff;
}
.comment .comment-list__item-contain .term .content .user .owner {
  flex-shrink: 0;
  background: var(--theme);
  color: #fff;
  padding: 0 5px;
  border-radius: 2px;
  font-style: normal;
}
.comment .comment-list__item-contain .term .content .user .agent {
  margin-left: auto;
  font-size: 12px;
  color: var(--minor);
}
.comment .comment-list__item-contain .term .content .user .waiting {
  color: #e6a23c;
  font-style: normal;
}
.comment .comment-list__item-contain .term .content .substance {
  width: 100%;
  background: var(--classD);
  padding: 12px 15px;
  border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
  color: var(--main);
  margin-bottom: 8px;
  word-break: break-word;
  line-height: 24px;
}
.comment .comment-list__item-contain .term .content .substance .parent {
  color: #388bff;
  margin-bottom: 5px;
  user-select: none;
  font-weight: 500;
}
.comment .comment-list__item-contain .term .content .substance .owo_image {
  height: 22px;
}
.comment .comment-list__item-contain .term .content .substance .draw_image {
  max-width: 100%;
}
.comment .comment-list__item-contain .term .content .handle {
  display: flex;
  align-items: center;
  color: var(--minor);
}
.comment .comment-list__item-contain .term .content .handle .date {
  margin-right: 10px;
}
.comment .comment-list__item-contain .term .content .handle .reply {
  display: flex;
  align-items: center;
  color: var(--main);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.35s;
}
.comment .comment-list__item-contain .term .content .handle .reply .icon {
  margin-right: 5px;
}
.comment .comment-list__item-contain .term .content .handle .reply:hover {
  color: var(--theme);
}
.comment .comment-list__item-contain .term .content .handle .reply:hover .icon {
  fill: var(--theme);
}
.comment .comment-list__item-children {
  padding-left: 63px;
}
.comment .comment-list__item-children .comment-list__item-children {
  padding-left: 0;
}
.comment .comment-list__item .comment__respond {
  margin-left: 63px;
  margin-bottom: 15px;
  animation: showComment 0.5s;
}
.comment .comment-list .comment-list {
  padding-top: 0;
}
.comment .pagination {
  padding-top: 0;
}
</style>
